<template>
  <div class="content">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="form"
    >
      <el-form-item
        label="商户号:"
        prop="merchant_id"
      >
        <el-select
          ref="select"
          v-model="ruleForm.merchant_id"
          :loading="loading"
          remote
          :remote-method="remoteMethod"
          filterable
          clearable
          placeholder="请选择商户号"
          style="width:250px;"
          @change="selectChange"
          @focus="mobileClear"
          @hook:mounted="mobileClear"
          @visible-change="mobileClear"
        >
          <el-option
            v-for="item in merchantList"
            :key="item.value"
            :label="item.label&&item.label!==''?item.label+' - '+item.value:item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="商户支付秘钥:"
        prop="api_secret"
      >
        <el-input
          v-model="ruleForm.api_secret"
          clearable
          style="width:250px;"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="商户支付私钥:"
        prop="private_key"
      >
        <el-input
          v-model="ruleForm.private_key"
          clearable
          style="width:250px;"
          :rows="5"
          type="textarea"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="证书序列号:"
        prop="serial"
      >
        <el-input
          v-model="ruleForm.serial"
          clearable
          style="width:250px;"
        ></el-input>
      </el-form-item>
    </el-form>
    <span class="dialog-footer rowFlex">
      <el-button
        class="btn"
        @click="close"
      >取 消</el-button>
      <el-button
        :loading="loading"
        class="btn"
        type="primary"
        @click="submit"
      >确 定</el-button>
    </span>
  </div>
</template>

<script>
import { merchantAdd, merchantUpdate } from '@/api/merchant'
import { commonData } from '@/api/common'
export default {
  props: ['row'],
  data() {
    return {
      ruleForm: {
        merchant_id: '',
        body: '',
        api_secret: '',
        private_key: '',
        serial: ''
      },
      merchantList: [],
      loading: false,
      rules: {
        merchant_id: [{ required: true, message: '请选择商户号', trigger: 'change' }],
        api_secret: [{ required: true, message: '请输入商户支付秘钥', trigger: 'blur' }],
        private_key: [{ required: true, message: '请输入商户支付私钥', trigger: 'blur' }],
        serial: [{ required: true, message: '请输入证书序列号', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  mounted() {
    this.init()
  },
  methods: {
    init() {
      console.log(this.row)
      if (this.row.id) {
        this.ruleForm.merchant_id = this.row.merchant_id
        this.ruleForm.body = this.row.body
        this.ruleForm.api_secret = this.row.api_secret
        this.ruleForm.private_key = this.row.private_key
        this.ruleForm.serial = this.row.serial
      }
      this.requestInit()
    },
    // 执行这个重新获取焦点的方法 就可以了
    mobileClear(async) {
      this.$nextTick(() => {
        if (!async) {
          // ios 手机有延迟问题
          setTimeout(() => {
            const { select } = this.$refs
            const input = select.$el.querySelector('.el-input__inner')
            input.removeAttribute('readonly')
          }, 200)
        }
      })
    },
    selectChange(value) {
      if (value) {
        const obj = this.merchantList.find((item) => item.value == value)
        obj.label ? (this.ruleForm.body = obj.label) : ''
      }
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        commonData({ type: 'merchant', value: query }).then((res) => {
          this.loading = false
          this.merchantList = res.data.data
        })
      }
    },
    requestInit() {
      commonData({ type: 'merchant', value: '' }).then((res) => {
        this.merchantList = res.data.data
      })
    },
    close() {
      this.$emit('cancel')
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.row.id) {
            this.edit()
          } else {
            this.add()
          }
        } else {
          console.log(valid)
        }
      })
    },
    add() {
      this.loading = true
      merchantAdd(this.ruleForm).then((res) => {
        if (res.status_code === 1) {
          this.$message.success(res.msg)
          this.$emit('ok')
        }
        this.loading = false
      })
    },
    edit() {
      this.loading = true
      this.ruleForm.id = this.row.id
      merchantUpdate(this.ruleForm).then((res) => {
        if (res.status_code === 1) {
          this.$message.success(res.msg)
          this.$emit('ok')
        }
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  padding-right: 20px;
  .form {
    padding: 20px;
  }
}
</style>